<template>
    <div>
        <div class="head">
            <span>订单管理 > 交易订单</span>
        </div>
        <div class="searchFor">
            <div class="searchItem">
                <span>订单搜索</span>
                <el-select v-model="searchForm.searchType" class="m-2" placeholder="Select" :style="{ width: '125px' }">
                    <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-model="searchForm.input" :style="{ width: '180px' }" />
            </div>
            <div class="searchItem">
                <span>支付方式</span>
                <el-select v-model="searchForm.payType" class="m-2" placeholder="Select" :style="{ width: '125px' }">
                    <el-option v-for="item in payOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="searchItem">
                <span>实付金额</span>
                <el-input-number :controls="false" v-model="searchForm.minMoney" :style="{ width: '80px' }" />
                &nbsp;~&nbsp;
                <el-input-number :controls="false" v-model="searchForm.maxMoney" :style="{ width: '80px' }" />
            </div>
            <div class="searchItem">
                <span>下单时间</span>
                <el-date-picker v-model="searchForm.startDates" type="date" :style="{ width: '120px' }"
                    :disabled-date="disabledDate" />
                &nbsp;至&nbsp;
                <el-date-picker v-model="searchForm.endDates" type="date" :style="{ width: '120px' }"
                    :disabled-date="disabledDate" />

            </div>
            <div class="searchItem">
                <el-button color="#ed742f" :dark="false" style="color:#fff">筛选</el-button>
                <el-button link color="#ed742f" :dark="true" style="color:#ed742f ;">清除</el-button>
            </div>

        </div>

        <div class="tb">
            <div class="tbHead">
                <div style="width: 30%;">商品</div>
                <div style="width: 12%;">单价/数量</div>
                <div style="width: 18%;">收货信息</div>
                <div style="width: 10%;">实付金额</div>
                <div style="width: 8%;">支付方式</div>
                <div style="width: 7%;">订单状态</div>
                <div style="width: 15%;">操作</div>
            </div>

            <div class="tbItem">
                <div class="itemTop">
                    <span>订单号：{{ "xxxxxxxxxxxxxxxx" }}
                    </span>
                    <span>下单时间：{{ new Date().toLocaleString() }}</span>
                </div>
                <div class="itemContent">
                    <div class="item" style="width: 30%;">商品</div>
                    <div class="item" style="width: 12%;">单价/数量</div>
                    <div class="item" style="width: 18%;">收货信息</div>
                    <div class="item" style="width: 10%;">实付金额</div>
                    <div class="item" style="width: 8%;">支付方式</div>
                    <div class="item" style="width: 7%;">订单状态</div>
                    <div class="item caozuo" style="width: 15%;">
                        <div>
                            <el-button link :dark="true" style="color:#ed742f ;" @click="priceVisible = true">修改价格</el-button>
                        </div>

                        <div>
                            <el-button link :dark="true" style="color:#ed742f ;"
                                @click="cancelVisible = true">取消订单</el-button>
                        </div>
                        <div>
                            <el-button link :dark="true" style="color:#ed742f ;" @click="sendVisible = true">发货</el-button>
                        </div>
                        <div>
                            <el-button link :dark="true" style="color:#ed742f ;">订单详情</el-button>
                        </div>


                    </div>
                </div>
            </div>
        </div>

        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
                layout="prev, pager, next, jumper" :total="100" @current-change="currentChange" />
        </div>

        <el-dialog v-model="priceVisible" title="修改价格" width="24%" top="25vh">
            <div class="priceDialog">
                <div>
                    <div class="item">
                        <span>商品价格</span>
                        <el-input v-model="changePrice.price" style="width:180px;" placeholder="请输入修改后的金额" />
                    </div>
                    <div class="item">
                        <span>运费</span>
                        <el-input v-model="changePrice.freight" style="width:180px;" placeholder="请输入修改后的金额" />
                    </div>
                </div>
                <div class="footer">
                    <el-button color="#ed742f" style="color:#fff ;" :dark="false" @click="priceVisible = false"
                        size="large">确认</el-button>
                    <el-button @click="priceVisible = false" size="large">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog v-model="cancelVisible" title="提示" width="15%" top="25vh">
            <div class="priceDialog">
                <div class="text">
                    是否确认取消订单
                </div>
                <div class="footer">
                    <el-button @click="cancelVisible = false" size="large">取消</el-button>
                    <el-button color="#ed742f" style="color:#fff ;" :dark="false" @click="cancelVisible = false"
                        size="large">确认</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog v-model="sendVisible" title="订单发货" width="30%" top="25vh">
            <div class="priceDialog">
                <div class="send">
                    <div class="item2">
                        <span class="tit">收货信息</span>
                        <div class="cont">
                            {{ "用户信息" }}<br>
                            {{ "地址信息" }}
                        </div>
                    </div>
                    <div class="item2">
                        <span class="tit">发货方式</span>
                        <div class="cont">
                            <div class="type">
                                <el-radio-group v-model="sendForm.sendType">
                                    <el-radio label="self" value="self">自己联系快递</el-radio>
                                    <el-radio label="none" value="none">无需物流</el-radio>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <el-button color="#ed742f" style="color:#fff ;" :dark="false" @click="sendVisible = false"
                        size="large">发货</el-button>
                    <el-button @click="sendVisible = false" size="large">取消</el-button>

                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const searchForm = reactive({
    searchType: "",
    input: "",
    payType: "",
    startDates: "",
    endDates: "",
    minMoney: null,
    maxMoney: null,

})
const sendForm = reactive({
    sendType: "self",

})
const changePrice = reactive({
    price: null,
    freight: null
})
const currentPage = ref(1)
const pageSize = ref(5)
const currentChange = (current: any) => {
    currentPage.value = current
}

const priceVisible = ref(false)
const cancelVisible = ref(false)
const sendVisible = ref(false)

const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}

const payOptions = [
    {
        value: "",
        label: "全部"
    },
    {
        value: "ali",
        label: "支付宝"
    },
    {
        value: "wx",
        label: "微信"
    },
]
const searchOptions = [
    {
        value: "",
        label: "订单号"
    },
    {
        value: "proName",
        label: "商品名称"
    },
    {
        value: "nickName",
        label: "买家昵称"
    },
    {
        value: "tel",
        label: "买家手机号"
    },
    {
        value: "addrName",
        label: "收货人姓名"
    },
    {
        value: "proNo",
        label: "商品货号"
    },
    {
        value: "addrTel",
        label: "收货人手机号"
    }
]
</script>

<style scoped lang="less">
.head {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: white;

    span {
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}

.searchFor {

    width: 100%;
    height: 130px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    color: #2c2c2c;
    font-size: 16px;
    margin-bottom: 20px;

    .searchItem {
        span {
            margin-right: 15px;
        }

        margin-left: 20px;
        width: 400px;
        display: flex;
        justify-content: start;
        align-items: center;
    }

}

.tb {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tbHead {
        margin: 20px 0;
        height: 50px;
        width: 99%;
        display: flex;
        background-color: #f2f2f2;

        div {
            font-size: 14px;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .tbItem {
        width: 99%;
        height: 175px;
        box-shadow: 5px 5px 7px 0px #acabab;

        .itemTop {
            font-size: 12px;
            width: 100%;
            height: 35px;
            background-color: #f2f2f2;
            display: flex;
            align-items: end;

            span {
                margin: 0 0 5px 20px;
            }
        }

        .itemContent {
            width: 100%;
            height: 140px;
            display: flex;

            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: content-box;
                border-left: 1px solid #f2f2f2;

            }

            .caozuo {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }

    }
}

.pagination {
    margin: 25px;
    display: flex;
    justify-content: end;
}

.priceDialog {

    width: 100%;

    .item {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        span {
            display: flex;
            margin-right: 10px;
            width: 120px;
            justify-content: end;
        }
    }

    .send {
        width: 100%;

        .item2 {
            display: flex;

            .tit {
                width: 120px;
                align-self: flex-start;
            }

            .cont {
                flex: 1;

            }
        }
    }

    .text {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

    .footer {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }
}</style>